<template>
  <view class="container">
    <!-- #ifdef H5 -->
    <u-navbar title="忘记密码" title-size="36"></u-navbar>
    <!-- #endif -->
    <view class="">
      <view class="inp">
        <u-input
          v-model="form.mobile"
          type="text"
          placeholder="请输入手机号"
          clearable
          autocomplete="off"
          prefix-icon="phone"
        />
      </view>
      <view class="inp">
        <u-input
          v-model="form.code"
          type="text"
          placeholder="请输入验证码"
          clearable
          autocomplete="off"
          prefix-icon="file-text"
        />
        <text v-if="time <= 0" @click="onCode" style="color: #0f76bc">获取验证码</text>
        <text v-else style="color: #999999">{{ time }}秒后重新获取</text>
      </view>
      <view class="inp">
        <u-input
          type="password"
          v-model="form.password"
          placeholder="请输入新密码"
          clearable
          autocomplete="off"
          prefix-icon="lock"
        />
      </view>
      <view class="inp">
        <u-input
          type="password"
          v-model="again"
          placeholder="请再次输入新密码"
          clearable
          autocomplete="off"
          prefix-icon="lock"
        />
      </view>
      <view class="" style="font-size: 24rpx; margin-left: 20rpx; color: #999999">
        密码长度限制6-20位
      </view>
    </view>
    <view class="submit-btn" style="margin: 200rpx 0 0 30rpx" @click="submit"> 确认修改 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: 0,
      again: '',
      form: {
        mobile: '',
        code: '',
        password: ''
      }
    }
  },
  methods: {
    onCode() {
      this.$u
        .post('/app-api/member/auth/send-sms-code', {
          mobile: this.form.mobile,
          scene: 4
        })
        .then((res) => {
          this.$u.toast(res.msg || '发送成功')
          if (Number(res.code) === 0) {
            this.time = 60
            let it = setInterval(() => {
              if (this.time <= 0) {
                clearInterval(it)
                return
              }
              this.time -= 1
            }, 1000)
          }
        })
    },
    submit() {
      if (!this.form.mobile) {
        this.$u.toast('手机号不能为空')
        return
      }
      if (!this.form.code) {
        this.$u.toast('验证码不能为空')
        return
      }
      if (!this.form.password) {
        this.$u.toast('密码不能为空')
        return
      }
      if (this.form.password.length < 6 || this.form.password.length > 20) {
        this.$u.toast('密码长度需要6-20字符')
        return
      }
      if (this.form.password != this.again) {
        this.$u.toast('两次密码不一致')
        return
      }

      this.$u.put('/app-api/member/user/reset-password', this.form).then((res) => {
        this.$u.toast('密码修改成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      })
    }
  }
}
</script>

<style>
@import url('../../style/btn.css');

.container {
  height: 100vh;
  background: linear-gradient(135deg, #f8fcff 25%, #eff9ff 50%, #fef7f7 75%, #f8fcff 100%);
  padding: 20rpx 58rpx;
}

.inp {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 90rpx;
  background-color: #fff;
  margin: 30rpx 0;
}

.inp input {
  flex: 1;
  margin: 0 20rpx;
}
</style>
